<template>
  <div class="powerOperationReport">
    <page-container :title="false">
      <a-card :bordered="false">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :span="12">
            <a-form-model layout="inline" :model="formItemLayout">
              <a-form-model-item label="">
                <a-date-picker v-model="formItemLayout.date" />
              </a-form-model-item>
              <a-form-model-item label="电压类别">
                <a-select default-value="lucy" style="width: 120px" @change="handleChange">
                  <a-select-option value="jack">
                    全部
                  </a-select-option>
                  <a-select-option value="lucy">
                    相电压
                  </a-select-option>
                  <a-select-option value="disabled">
                    线电压
                  </a-select-option>
                </a-select>

              </a-form-model-item>
              <a-form-model-item label="时间间隔">
                <a-select default-value="lucy" style="width: 120px" @change="handleChange">
                  <a-select-option value="jack">
                    5分钟
                  </a-select-option>
                  <a-select-option value="lucy">
                    10分钟
                  </a-select-option>
                  <a-select-option value="disabled">
                    15分钟
                  </a-select-option>
                </a-select>

              </a-form-model-item>
              <a-form-model-item label="">
                <a-button>查询</a-button>
              </a-form-model-item>
            </a-form-model>
          </a-col>
          <a-col :span="4">
            <a-button>导出</a-button>
          </a-col>
        </a-row>
        <s-table
          ref="table"
          row-key="id"
          :columns="tableParams.columns"
          :data="tableParams.loadData"
          :init-request="tableParams.initRequest"
          :show-pagination="tableParams.showPagination"
          :scroll="{ x: true}"
          :table-layout="tableParams.tableLayout"
        >
          <span slot="serial" slot-scope="text, record, index" class="sign">
            {{ index + 1 }}
          </span>
          <span slot="status" slot-scope="text">
            <a-badge v-if="text === 'ENABLE'" status="success" text="启用" />
            <a-badge v-else status="danger" text="停用" />
          </span>
          <span slot="remark" slot-scope="text">
            <text-tooltip :content="text" />
          </span>
          <span slot="operate" slot-scope="text">
            <template>
              <a>操作</a>
            </template>
          </span>
        </s-table>
      </a-card>
    </page-container>
  </div>
</template>
<script>

// import { TextTooltip } from '@/components'
// import { addPostApi, modifyPostApi, getPostListApi, getPostByParamsApi, deletePostApi, deletePostsApi, exportPostApi } from '@/api/system/post'
import { parseTime } from '@/utils'
export default {
  name: 'PowerOperationReport',
  data() {
    const columns = [
      {
        title: '站点名称',
        width: '150px',
        scopedSlots: { customRender: 'serial' }
      },
      {
        title: '采集时间',
        width: '150px',
        dataIndex: 'positionName'
      },
      {
        title: 'Epi(kwh)',
        dataIndex: 'status',
        width: '150px',
        scopedSlots: { customRender: 'status' }
      },
      {
        title: 'Ua(V)',
        dataIndex: 'createDate',
        width: '150px',
        customRender(createDate) {
          return parseTime(createDate)
        }
      },
      {
        title: 'Ub(V)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'Uc(V)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'la(A)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'lb(A)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'lc(A)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'P(kW)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'Q(kVar)',
        dataIndex: 'remark',
        width: '150px',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: 'Pf',
        width: '500px',
        dataIndex: 'operate',
        scopedSlots: { customRender: 'operate' }
      }
    ]
    return {
      formItemLayout: {
        date: undefined
      },
      tableParams: {
        pagination: {
          pageSizeOptions: ['5', '10', '15', '20']
        },
        columns,
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.$parseQueryParams(this.queryParam))
          // return getPostByParamsApi(requestParameters)
          //   .then(res => {
          //     return res.data
          //   })
        },
        selectedRowKeys: [],
        selectedRows: [],
        initRequest: true, // 是否主动请求数据
        showPagination: false, // 是否使用分页
        tableLayout: 'flxed'
      }
    }
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`)
    }
  }
}
</script>
